<template>
  <div>
    <!-- 筛选、搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="模糊搜索">
          <el-input
            v-model="formInline.query_str"
            placeholder="请输入"
            clearable
          />
        </el-form-item> -->
      <el-form-item label="专家组">
        <el-select
          v-model="formInline.project_group"
          placeholder="专家组"
          @change="handleGroupChange"
        >
          <el-option
            v-for="item in projectGroups"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="批次">
        <el-select v-model="formInline.batch_name" placeholder="批次">
          <el-option
            v-for="item in batches"
            :label="item.batch_name"
            :value="item.batch_name"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCurrentChange(1)"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div v-if="tableData.length > 0">
    <el-table
      ref="multipleTableRef"
      v-loading="tabLoading"
      :data="tableData"
      border
      style="width: 100%"
      height="500"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="project_code" label="项目编码" width="160" />
      <el-table-column prop="project_name" label="项目名称" width="150" />
      <el-table-column prop="project_class" label="项目类别" width="100" />
      <el-table-column prop="project_type" label="项目规模" width="100" />
      <el-table-column prop="project_group" label="专家组" width="120" />
      <el-table-column
        prop="project_batch.batch_name"
        label="项目批次"
        width="180"
      />
      <el-table-column prop="statu" label="项目状态" width="120" />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        :formatter="tableDateFormatter"
      />
      <el-table-column
        prop="project_owner.fullname"
        label="项目负责人"
        width="100"
      />
      <el-table-column
        prop="project_owner.department"
        label="项目负责人部门"
        width="130"
      />
      <el-table-column
        prop="project_owner.phone"
        label="项目负责人电话"
        width="130"
      />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleDetail(scope.$index)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block items-center justify-center">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="cnt"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div v-if="tableData.length == 0">
    <el-empty description="无记录" />
  </div>

  <form-drawer
    ref="formDrawerRef"
    title="项目详情"
    destroyOnClose
    :showButton="false"
  >
    <el-descriptions
      title="项目基础信息"
      direction="vertical"
      :column="4"
      :size="size"
      border
    >
      <el-descriptions-item label="项目编码">{{
        detailProject.value.project_code
      }}</el-descriptions-item>
      <el-descriptions-item label="项目名称">{{
        detailProject.value.project_name
      }}</el-descriptions-item>
      <el-descriptions-item label="项目类别">{{
        detailProject.value.project_class
      }}</el-descriptions-item>
      <el-descriptions-item label="项目规模">
        {{ detailProject.value.project_type }}
      </el-descriptions-item>
      <el-descriptions-item label="项目专家组"
        >{{ detailProject.value.project_group }}
      </el-descriptions-item>
      <el-descriptions-item label="项目提交时间"
        >{{ formatDate(detailProject.value.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="项目所在批次"
        >{{
          detailProject.value.project_batch == null
            ? detailProject.value.project_batch
            : detailProject.value.project_batch.batch_name
        }}
      </el-descriptions-item>
      <el-descriptions-item label="项目状态"
        >{{ detailProject.value.statu }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      :title="'项目成员' + (index + 1)"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      v-for="(item, index) in detailProject.value.project_member"
      class="mt-2"
    >
      <el-descriptions-item label="成员名">{{
        item.user_fullname
      }}</el-descriptions-item>
      <el-descriptions-item label="成员所在部门">{{
        item.user_department
      }}</el-descriptions-item>
      <el-descriptions-item label="成员贡献占比" :span="2">{{
        item.menbers_percentage
      }}</el-descriptions-item>
      <el-descriptions-item label="成员主要负责项目内容">
        {{ item.members_job }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="项目文件"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      class="mt-2"
    >
      <el-descriptions-item label="文件列表(点击下载)">
        <el-link
          class="ml-5"
          type="success"
          v-for="item in detailProject.value.project_file"
          v-if="detailProject.value.project_file.length > 0"
          :href="'/api/v1/download_file/' + item.id"
          @click="handleFileTag(item.id)"
          >{{ item.file_path }}</el-link
        >
        <span v-else>无</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="项目描述"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      class="mt-2"
      border
    >
      <el-descriptions-item>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="项目简介" name="1">
            <div>
              {{ detailProject.value.project_brief }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="项目背景" name="2">
            <div>
              {{ detailProject.value.project_background }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="项目创新点" name="3">
            <div>
              {{ detailProject.value.project_annotation }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="项目应用/推广价值" name="4">
            <div>
              {{ detailProject.value.project_effect }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="项目操作记录"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      class="mt-2"
    >
      <el-descriptions-item label="记录">
        <el-timeline class="mt-2">
          <el-timeline-item
            v-for="(item, index) in detailProject.value.project_log"
            :key="index"
            type="primary"
            size="large"
            hollow="true"
            :timestamp="formatDate(item.createTime)"
          >
            {{ item.statu }}
          </el-timeline-item>
        </el-timeline>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="打分"
      :column="4"
      :size="size"
      direction="vertical"
      :style="blockMargin"
      border
      class="mt-2"
    >
      <el-descriptions-item :label="item.dimension" v-for="item in detailProject.value.audit_records">
        {{ item.point }}
      </el-descriptions-item>
    </el-descriptions>
  </form-drawer>
</template>

<script setup>
import { onMounted, onUpdated, reactive, ref } from "vue";

import {
  getProjectsByUser,
  getUserGroups,
  download_file,
  getTaggingProjects,
  tag_batch,
  getBatches,
  getProjectsByGroup,
  getAuditRule,
  audit,
  getAuditedProject
} from "@/api/apiv1";
import { formatDate, message } from "@/composables/util";

import FormDrawer from "@/components/FormDrawer.vue";

const dialogFormVisible = ref(false);
const batches = ref([]);
const tabLoading = ref(false);
const tableData = ref([]);
const cnt = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const formDrawerRef = ref(null);
const detailProject = reactive({});

const projectGroups = ref([]);

const projectLogs = ref([]);

const formInline = reactive({
  project_group: "",
  batch_name: "",
});

const pointsForm = ref([
  {
    point: 0,
  },
]);

const auditRules = ref([]);

const multipleSelection = ref([]);

const handleSelectionChange = (v) => {
  multipleSelection.value = v;
};

const tableDateFormatter = (row, column) => {
  return formatDate(row.createTime);
};

const init = () => {
  getUserGroups().then((res) => {
    projectGroups.value = res.data;
    formInline.project_group = projectGroups.value[0];
    initBatches(formInline.project_group);
  });
};

const initBatches = (project_group) => {
  getBatches(project_group).then((res) => {
    batches.value = res.data.records;
    formInline.batch_name = batches.value[0].batch_name;
  });
};

const getData = () => {
  tabLoading.value = true;
  getAuditedProject(
    formInline.batch_name,
    pageSize.value,
    currentPage.value
  ).then((res) => {
    cnt.value = res.data.cnt;
    tableData.value = res.data.records;
    tabLoading.value = false;
  });
  
};

onMounted(() => {
  init();
});

const handleGroupChange = (v) => {
  initBatches(v);
};

const handleSizeChange = (v) => {
  pageSize.value = v;
  getData();
};
const handleCurrentChange = (v) => {
  currentPage.value = v;
  getData();
};

const confirmAudit = () => {
  audit(detailProject.value.id,pointsForm.value).then(res => {
    if(res.code == 200){
      message("提交成功")
      formDrawerRef.value.close();
      getData();
    } else {
      message(res.msg,"error")
    }
  })
}

const handleDetail = (index) => {
  console.log(index);
  detailProject.value = tableData.value[index];
  console.log(detailProject.value);
  formDrawerRef.value.open();

  getAuditRule(detailProject.value.project_group).then((res) => {
    auditRules.value = res.data;
    console.log(auditRules.value);

    // 清空
    pointsForm.value = [];

    for (let index in auditRules.value) {
      let item = auditRules.value[index];
      pointsForm.value.push({
        group_name: item.group_name,
        dimension: item.dimension,
        point: 0,
      });
    }
  });
};

const handleFileTag = (id) => {
  download_file(id);
};
</script>

<style scoped>
/* .slider-demo-block {
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 2px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 80%;
} */
</style>